<template>
    <div class="whole">
      <div class="whole-wrap">
        <div class="Data_volume">
          <div class="check-rows">
            <div class="volume_1">
              <div class="today-sl bigMath">
                {{ today }}
                <p>今日受理量（件）</p>
              </div>
              <div class="line">
                <p class="on-line">
                  线上(件)<span>{{ line }}</span>
                </p>
                <p class="on-line">
                  线下(件)<span>{{ lines }}</span>
                </p>
              </div>
            </div>
            <div class="volume_1">
              <div class="today-sl bigMath">
                {{ month }}
                <p>本月受理量(件)</p>
              </div>
              <div class="line">
                <p class="on-line">
                  线上(件)<span>{{ Offline }}</span>
                </p>
                <p class="on-line">
                  线下(件)<span>{{ Offlines }}</span>
                </p>
              </div>
            </div>
            <div class="volume_1">
              <div class="today-sl bigMath">
                {{ This_year }}
                <p>本年受理量(万件)</p>
              </div>
              <div class="line">
                <p class="on-line">
                  线上(万件)<span>{{ year_Offline }}</span>
                </p>
                <p class="on-line">
                  线下(万件)<span>{{ year_Offlines }}</span>
                </p>
              </div>
            </div>
            <div class="volume_1">
              <div class="today-sl bigMath">
                {{ Cumulative }}
                <p>累计受理量(万件)</p>
              </div>
              <div class="line">
                <p class="on-line">
                  线上(万件)<span>{{ year_Cumulative }}</span>
                </p>
                <p class="on-line">
                  线下(万件)<span>{{ year_Cumulatives }}</span>
                </p>
              </div>
            </div>
          </div>
          <div class="check-row">
            <div class="Acceptance">
              <div class="top">
                <div class="top_tb">
                  <div
                    class="Changes"
                    :class="{ active: teb_active == 1 }"
                    @click="teb_active = 1"
                  >
                    待预审(<span>{{ Handling }}</span
                    >)
                  </div>
                  <div
                    class="Changes"
                    :class="{ active: teb_active == 2 }"
                    @click="teb_active = 2"
                  >
                    待受理(<span>{{ Handling2 }}</span
                    >)
                  </div>
                </div>
                <div class="ckgd">查看更多<span class="jt"></span></div>
              </div>
              <div class="list" v-for="item in loop">
                <div class="list_s">
                  <div class="xxtx-zths">
                    {{ item.name2 }}
                  </div>
                  <div class="wjqk-span3">{{ item.name3 }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="Data_volume">
          <div class="check-rows">
            <div class="volume_2">
              <div class="top">图形概览</div>
            </div>
          </div>

          <div class="check-right">
            <div class="Acceptance Change">
              <div class="top">
                <div class="check_work">考勤统计</div>
                <div class="ckgd_kq">考勤异常({{ test }})</div>
              </div>
              <div class="list">
                <el-calendar v-model="dataValue">
                  <template slot="dateCell" slot-scope="{ date, data }">
                    <p>
                      {{ data.day.split("-").slice(2).join("") }}
                      <i></i>
                    </p>
                  </template>
                </el-calendar>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      today: "1690",
      line: "1281",
      lines: "409",
      month: "187902",
      Offline: "85801",
      Offlines: "102101",
      This_year: "198.2",
      year_Offline: "92.7",
      year_Offlines: "105.5",
      Cumulative: "198.2",
      year_Cumulative: "92.7",
      year_Cumulatives: "105.5",
      Handling: "8",
      Handling2: "4",
      teb_active: "1",
      test: "5",
      dataValue: new Date(),
      loop: [
        {
          name2: "公司（企业）名称预先核准",
          name3: "2022-02-24",
        },
        {
          name2: "高等学校等毕业生接收手续办理",
          name3: "2022-02-24",
        },
        {
          name2: "不动产勘查许科长变更登记或注销登记",
          name3: "2022-02-24",
        },
        {
          name2:
            "不办理勘查许可证变更登记或注销登记手续涉及吊销勘查许可证的处罚",
          name3: "2022-02-24",
        },
        {
          name2: "不按期缴纳探矿权使用费和价款的处罚",
          name3: "2022-02-24",
        },
        {
          name2: "不按期缴纳探矿权使用费和价款的处罚",
          name3: "2022-02-24",
        },
      ],
      calendarData: [
        { months: ["03"], days: ["02"], things: "看星星" },
        { months: ["03"], days: ["02"], things: "看月亮" },
      ],
    };
  },
  created(){
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.whole {
  width: 100%;
  background-color: #f9f9f9;
  overflow: auto;
}

.Data_volume {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.whole .check-rows {
  width: 69%;
  overflow: hidden;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right: 15px;
}

.volume_1 {
  width: 49.3%;
  background-color: #ffffff;
  box-shadow: 1px 0 6px 1px rgba(223, 222, 222, 0.3);
  margin-bottom: 18px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.today-sl {
  text-align: center;
  font-size: 50px;
  color: #409eff;
  width: 40%;
}

.today-sl p {
  font-size: 18px;
  color: #787878;
  font-weight: 500;
}

.line {
  width: 60%;
}

.on-line {
  background-color: #eff7ff;
  height: 63px;
  font-size: 16px;
  color: #5b5b5b;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 10px 15px;
}

.on-line span {
  font-size: 30px;
  color: #409eff;
  font-weight: 600;
}

.whole .check-row {
  width: 30%;
  overflow: hidden;
}

.Acceptance {
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 1px 0 6px 1px rgba(223, 222, 222, 0.3);
}


.top {
  height: 33px;
  border-bottom: 1px solid #f0f2f5;
  padding: 10px;
  font-size: 18px;
  font-weight: 300;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top_tb {
  display: flex;
}

.jt {
  width: 18px;
  height: 26px;
  background-image: url("/img/workBench/arrow.png");
  background-size: contain;
  display: inline-block;
  vertical-align: bottom;
}

.list {
  padding: 10px 0px;
  border-bottom: 1px solid #f5f5f5;
  margin: 0px 15px;
}

.list_s {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}

.Changes {
  margin-right: 20px;
  color: #888888;
}

.Changes.active {
  margin-right: 20px;
  color: #181717;
  position: relative;
}

.active::after {
  content: "";
  position: absolute;
  display: block;
  width: 88px;
  height: 2px;
  background-color: #2a83f1;
  bottom: -14px;
}

.Changes span {
  color: #ff8047;
}

.wjqk-span1 {
  color: #333333;
  vertical-align: middle;
  font-weight: 300;
}

.wjqk-span1:hover {
  color: #2a83f1;
}

.xxtx-zths {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  color: #494949;
  vertical-align: middle;
  font-weight: 300;
}

.Changes.active {
  margin-right: 18px;
  color: #409eff;
  position: relative;
}

.Changes.active span {
  color: #409eff;
}

.active::after {
  content: "";
  position: absolute;
  display: block;
  width: 88px;
  height: 2px;
  background-color: #2a83f1;
  bottom: -14px;
}

.ckgd {
  flex: 0 1 auto;
  color: #787878;
  font-size: 18px;
}

.ckgd_kq {
  color: #616161;
  font-size: 16px;
}

.wjqk-content li {
  padding: 15px 5px;
  border-bottom: 1px solid #f5f5f5;
}

.wjqk-span3 {
  color: #c5c5c5;
  font-size: 16px;
  font-weight: 300;
}

.width {
  width: 70%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  display: inline-block;
}

.volume_2 {
  width: 100%;
  height: 470px;
  background-color: #ffffff;
  box-shadow: 1px 0 6px 1px rgba(223, 222, 222, 0.3);
  border-radius: 8px;
}

.check_work {
  color: #2d2d2d;
}
/deep/.el-calendar__header {
  display: none;
}
/deep/.el-calendar-table .el-calendar-day {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  line-height: 32px;
}
/deep/.el-calendar-table {
  table-layout: auto;
}
.check-right {
}
/deep/.el-calendar-table td,
/deep/.el-calendar-table tr td:first-child,
/deep/.el-calendar-table tr:first-child td {
  border-radius: 50%;
  border: none;
}
/deep/.el-calendar-table td.is-selected {
  border-radius: 50%;
  background: #2a83f1 !important;
  color: #fff !important;
}
/deep/.el-calendar-table td.is-today {
  border-radius: 50%;
  background: #f2f8fe;
  color: #409eff;
}
/deep/.el-calendar-table .el-calendar-day:hover {
  border-radius: 50%;
  background: transparent;
}
/deep/ .el-calendar__body {
  p {
    position: relative;
    top: -15px;
    i {
      content: "";
      display: flex;
      width: 6px;
      height: 6px;
      background-color: orange;
      border-radius: 50%;
      position: relative;
      left: 6px;
      top: -3px;
    }
  }
}
.whole-wrap{
    padding: 15px;
}
</style>